<template>
  <div class="common-pagination primary-blue">
    <div class="el-pagination is-background" style="display: flex;align-items: center;justify-content: center;">
      <button type="button" :disabled="curPage === 1" class="btn-prev"
       @click="handlePrevClick"
      >
        <i class="el-icon el-icon-arrow-left"></i>
      </button>
      <ul class="el-pager">
        <li class="number" :class="{'active': pageNo === 1}" @click="handlePageClick(1)">{{1}}</li>
        <li class="number" v-if="curPage > 1">...</li>
        <li class="number" :class="{'active': pageNo === (curPage - 1) * 9 + item + 1}"
            v-for="item in number" :key="item"
            @click="handlePageClick((curPage - 1) * 9 + item + 1)"
        >{{ (curPage - 1) * 9 + item + 1}}</li>
        <li class="number" v-if="curPage < pageLength">...</li>
        <li class="number" :class="{'active': pageNo === page}" @click="handlePageClick(page)" v-if="page > 1">{{page}}</li>
      </ul>
      <button type="button" :disabled="curPage === pageLength" class="btn-next"
        @click="handleNextClick"
      >
        <i class="el-icon el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
const props = defineProps({
  page: {
    type: Number,
    default: 0
  },
  pageNo: {
    type: Number,
    default: 1
  }
})
const pageLength = ref(0)
pageLength.value = Math.ceil(props.page / 10)
const curPage = ref(1)
const firstPage = ref(1)
const lastPage = ref(10)
lastPage.value = props.page > 10 ? 10 : props.page
console.log(props.page, lastPage.value)
console.log(props.page < 10 ? props.page -2 : curPage === pageLength ? page % 10 - 1 : 9)
const number = computed(() => {
  if(props.page > 2){
    if(props.page < 10) {
      return props.page - 2
    }else{
      if(curPage === pageLength) {
        return page % 10 - 1
      }else{
        return 9
      }
    }
  }else{
    return 0
  }
})

const emits = defineEmits(['pageClick'])
watch(props, () => {

  window.scrollTo({top: 0, behavior: 'smooth'})
})
const handlePageClick = (item) => {
  if(item === 1){
    curPage.value = 1
  }
  if(item === props.page) {
    curPage.value = pageLength.value
  }
  emits('pageClick', item)
  // window.scrollTo({top: 0, behavior: 'smooth'})
}
const handlePrevClick = () => {
  curPage.value --
}
const handleNextClick = () => {
  curPage.value ++
}

</script>
